<template>
  <StatusColorSVG
    v-if="colors"
    :colors="colors"
    style="width: 16px; height: 16px; vertical-align: middle"
  ></StatusColorSVG>
  <img
    v-else
    :src="nodeData.icon"
    alt=""
    style="width: 16px; height: 16px; vertical-align: middle"
    class="v-status-color"
  />
</template>
<script lang="ts" setup>
import { NodeData } from "@/modules/model/project/IGraphNode";
import { computed } from "vue";
import { StatusColorSVG } from "@/mdesign-lib/mdesign-graph.umd.js";

const props = defineProps<{
  nodeData: NodeData;
}>();

const colors = computed(() => {
  const projectStatus = props.nodeData.showAttribute?.extraAttribute?.projectStatus;
  const hasColor = projectStatus ? projectStatus.some(property => property.alpha !== undefined) : false;
  const result = hasColor
    ? projectStatus?.map(property => ({
        r: property.r || 0,
        g: property.g || 0,
        b: property.b || 0,
        a: property.alpha || 0,
        value: property.propertyId
      }))
    : null;
  return result;
});
</script>
